<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { toRaw } from '@vue/reactivity'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import { feedAdd } from '@/api'
import { ElMessage } from 'element-plus'

const props = defineProps({
	dialogSelectVisible: Boolean,
	switchVal: Boolean,
	dataList: Array,
	roleList: Array
})
const emits = defineEmits(['changeDialogVisible', 'getDataList'])
watch([props.dataList, props.roleList], (newV, oldV) => {
	dataList.value = JSON.parse(JSON.stringify(newV[0]))
	selectStaffValue.value = JSON.parse(JSON.stringify(newV[1]))
})
const dialogVisible = ref(false)
const errStaffList = ref([])
const chooseDialogue = ref()
const typeshow = ref(1)
const selectStaffValue = ref([]) //选择分组定义
const dataList = ref([])
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
const openingDialogName = ref('')
const delStaff = (item, nowStaff) => {
	item.children = item.children.filter((staff) => {
		return staff.id != nowStaff.id
	})
}
// 强制刷新
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
// 选择员工弹窗
const getDataByIds = (val) => {
	switch (val) {
		case 'staffid':
			selectStaffData._value = toRaw(form.value[val])
			break
		case 'staffidTime':
			var arr = toRaw(staff_data.value)
			arr[staff_dataIndex.value].selectStaffData = form.value[val]
			staff_data._value = arr
			console.log('根据ids获取已选员工列表', staff_data.value)
			break
		case 'staff_standby':
			selectstaff_standbyData._value = [
				{
					id: 1,
					name: '21',
					avatar:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fec%2Fca%2Fd8%2Feccad87a334d082b8ff200ae01157e44.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639642180&t=2652a2445af742fc8a4bb6c8e4f18d1e',
					rbacName: '管理员'
				}
			]
			break
		case 'tag':
			selectTagData._value = [
				{
					id: 1,
					name: '21'
				}
			]
			break
	}
	handleRefresh()
}
const closeDialog = () => {
	selectStaffValue.value = JSON.parse(JSON.stringify(props.roleList))
	dataList.value = JSON.parse(JSON.stringify(props.dataList))
	emits('changeDialogVisible', false)
}
const submitData = async () => {
	let dataObj = {}
	dataList.value.forEach((data) => {
		data.children.forEach((child) => {
			dataObj[child.key] = child.isCheck ? '1' : '0'
		})
	})
	dataObj.staff_id = selectStaffValue.value[0].children.map((staff) => {
		return staff.id
	})
	dataObj.status = props.switchVal ? '1' : '0'
	try {
		const data = await feedAdd(dataObj)
		if (data.status === 'success') {
			ElMessage({
				message: data.msg,
				type: 'success'
			})
			await emits('getDataList', false)
			emits('changeDialogVisible', false)
		} else {
			ElMessage.error(data.msg)
		}
	} catch (error) {
		console.log(error)
		ElMessage.error(error)
	}
}
const getChooseData = (val) => {
	if (typeshow.value == 1) {
		var Type = toRaw(val)
		selectStaffValue.value[0].children = [...val]
		getDataByIds(selectStaffValue.value)
	} else if (typeshow.value == 2) {
		var Type = toRaw(val)
		selectStaffDay.value = Type
		getDataByIds(selectStaffDay.value)
	}
}
const showDialogue = (type, name, title) => {
	typeshow.value = type
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)
				chooseDialogue.value.show(name, selectStaffValue.value[0].children)
			}
	}
}

onBeforeMount(() => {
	const arr = []
	props.roleList.forEach((role) => {
		role.children.forEach((child) => {
			if (child.ischeck) {
				arr.push(child)
			}
		})
	})
	errStaffList.value = JSON.parse(JSON.stringify(arr))
})
</script>

<template>
	<div class="data-dialog">
		<el-dialog
			@close="emits('changeDialogVisible', false)"
			:center="true"
			v-model="props.dialogSelectVisible"
			custom-class="data-model"
			title="数据订阅"
		>
			<div class="selectModel">
				<div class="data-customer-list">
					<div v-for="item in dataList" :key="item.id" class="flex-row">
						<div class="title">{{ item.title }}：</div>
						<div class="flex-col">
							<div v-for="(child, index) in item.children" :key="index + item.id" class="check-box">
								<div class="checkbox-box" v-if="child.title === '企微提醒'">
									<el-checkbox v-model="child.isCheck" style="margin-right: 4px" />
									<span>{{ child.title }}</span>
									<el-tooltip placement="top" effect="light">
										<template #content>
											<div class="tooltip-img">
												<img
													style="width: 150px; height: 360px"
													src="http://www.crmuu.com/data-subscribe_priview__2.ab86151ebcb5.png"
													alt=""
												/></div
										></template>
										<sapn style="color: #1890ff; cursor: pointer; margin-left: 3px">示例</sapn>
									</el-tooltip>
								</div>
								<div class="checkbox-box" v-else-if="child.title === '邮件提醒'">
									<el-checkbox v-model="child.isCheck" style="margin-right: 4px" /><span>{{ child.title }}</span>
									<span style="color: rgba(0, 0, 0, 0.45); font-size: 14px; margin-left: 3px"
										>（将以邮件形式发送至接收员工在企业微信绑定的邮箱）</span
									>
									<el-tooltip placement="top" effect="light">
										<template #content>
											<div class="tooltip-img">
												<img
													style="width: 300px; height: 200px"
													src="http://www.crmuu.com/data-subscribe_priview__2.ab86151ebcb5.png"
													alt=""
												/></div
										></template>
										<sapn style="color: #1890ff; cursor: pointer; margin-left: 3px">示例</sapn>
									</el-tooltip>
								</div>
								<div class="checkbox-box" v-else>
									<el-checkbox v-model="child.isCheck" style="margin-right: 4px" />{{ child.title }}
								</div>
							</div>
						</div>
					</div>
					<div class="flex-row">
						<div style="margin-top: 6px" class="title">接收员工：</div>
						<div class="flex-col">
							<div class="accpet-tip">
								<el-icon style="color: #1890ff; margin-right: 3px"><BellFilled /></el-icon>
								员工查看的数据范围
								<!-- （个人数据、管理部门数据、全部数据），由员工在系统内的角色权限控制 -->
							</div>
							<div style="margin: 12px 0">
								<el-button @click="showDialogue('1', 'staff', 'staffid')" :icon="Plus">添加员工</el-button>
							</div>
							<!-- <div class="ame-alert-small">
								<el-icon style="color: #ff8f16; margin-right: 3px"><BellFilled /></el-icon>
								红色成员的互通账号过期或者席位被关闭，请重新激活/配置后使用
								<router-link style="text-decoration: none; color: #1890ff" to="">去配置</router-link>
							</div> -->
							<div style="height: 48px; margin-top: 12px" class="staff-content">
								<div v-for="(child, index) in errStaffList" :key="index">
									<div :class="child.ischeck ? ' no-seat  staff-box' : 'seat staff-box'">
										<img :src="child.avatar" alt="" />
										<span>{{ child.name }}</span>
										<img
											src="../../../../assets/img/img/work-order-system_delete.4c82db3e17ca.png"
											@click="delStaff(item, child)"
											class="del-staff"
										/>
									</div>
								</div>
							</div>
							<div class="flex-col">
								<div class="select-table">
									<div class="select-table-header flex-row">
										<div>角色</div>
										<div>员工</div>
									</div>
									<div class="select-table-content">
										<div v-for="(item, index) in selectStaffValue" :key="index" class="tr">
											<div style="width: 130px">{{ item.role }}</div>
											<div v-if="item.children.length" class="flex-row staff-content">
												<div v-for="(child, index) in item.children" :key="index">
													<div :class="child.ischeck ? ' no-seat  staff-box' : 'seat staff-box'">
														<img :src="child.avatar" alt="" />
														<span>{{ child.name }}</span>
														<img
															src="../../../../assets/img/img/work-order-system_delete.4c82db3e17ca.png"
															@click="delStaff(item, child)"
															class="del-staff"
														/>
													</div>
												</div>
											</div>
											<div v-else class="flex-row staff-content">
												<span style="color: #000000a6">-</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="footer-btn">
					<el-button @click="closeDialog" class="btn-large">取消</el-button>
					<el-button @click="submitData" class="btn-large" type="primary">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
	</div>
</template>

<style lang="scss" scoped>
:deep(.data-dialog .el-dialog__body) {
	padding: 15px;
}
.selectModel {
	:deep(.el-checkbox__inner::after) {
		box-sizing: content-box;
		content: '';
		border: 2px solid var(--el-checkbox-checked-icon-color);
		border-left: 0;
		border-top: 0;
		height: 7px;
		left: 3.5px;
		position: absolute;
		top: 1px;
		transform: rotate(45deg) scaleY(1);
		width: 3px;
		transition: transform 0.15s ease-in 50ms;
		transform-origin: center;
	}

	width: 100%;
	overflow-y: auto;
	.data-customer-list {
		margin-bottom: 12px;
		.flex-row {
			align-items: flex-start;
			display: -webkit-box;
			display: flex;
			justify-content: flex-start;
			padding: 0;
			.title {
				font-size: 14px;
				font-weight: 400;
				width: 88px;
				white-space: nowrap;
				color: rgba(0, 0, 0, 0.85);
				margin-top: 4px;
				margin-right: 4px;
				text-align: right;
			}
			.flex-col {
				display: flex;
				flex-direction: column;
				-webkit-box-align: start;
				align-items: flex-start;
				justify-content: flex-start;
				padding: 0;
				margin-bottom: 4px;
				.staff-content {
					position: relative;
					-webkit-box-flex: 1;
					flex: 1;
					flex-wrap: wrap;
					-webkit-box-align: start;
					align-items: flex-start;
					.del-staff {
						position: absolute;
						top: -8px;
						right: -4px;
						z-index: 1;
						width: 14px;
						height: 14px;
						font-size: 14px;
						color: #b9b3b3;
						cursor: pointer;
					}
					.no-seat {
						border: 1px solid #ff7875;
						background: #fff8f7;
					}
					.seat {
						background: #f8f8f8;
					}
					.staff-box {
						position: relative;
						display: flex;
						align-items: center;
						min-width: 114px;
						height: 42px;

						padding: 10px;
						margin-right: 8px;
						margin-bottom: 8px;
						border-radius: 2px;
						color: rgba(0, 0, 0, 0.85);
						img:first-child {
							width: 28px;
							height: 28px;
							margin-right: 8px;
						}
						span {
							font-size: 14px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
				.checkbox-box {
					display: flex;
					align-items: center;
				}
				.select-table {
					width: 620px;
					border-radius: 2px;
					margin-top: 12px;
					border: 1px solid #ebebeb;
					.select-table-header {
						background: #fcfcfc;
						padding: 12px 24px;
						font-size: 13px;
						color: #000000a6;
						div:first-child {
							width: 130px;
						}
						div:nth-child(2) {
							-webkit-box-flex: 1;
							flex: 1;
						}
					}
					.select-table-content {
						box-sizing: border-box;
						.tr {
							display: -webkit-box;
							display: flex;
							padding: 12px 24px;
							min-height: 72px;
							border-top: 1px solid #ebebeb;
						}
						.tr:nth-child(even) {
							background-color: #fcfcfc;
						}
					}
				}
				.ame-alert-small {
					display: flex;
					align-items: center;
					min-height: 36px;
					padding: 8px 16px;
					background: #fff6e3;
					font-size: 13px;
					color: #ad4e00;
					.ame-collapse {
						display: inline-flex;
						justify-items: flex-start;
						-webkit-box-align: start;
						align-items: flex-start;
						width: 100%;
					}
				}
				.accpet-tip {
					display: flex;
					align-items: center;
					height: 34px;
					background: #effaff;
					padding: 8px 16px;
					font-size: 13px;
					color: #000000a6;
				}
				.tooltip-img {
					padding: 16px;
				}
				.check-box {
					min-width: 100%;
					margin-bottom: 12px;
					color: rgba(0, 0, 0, 0.85);
				}
			}
		}
	}
	.footer-btn {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		.btn-large {
			width: 74px;
			height: 32px;
		}
	}
}
</style>
